<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		.box{
			width: 200px;height:200px;position: absolute;background: red;
			top: 100px;left:50px;
		}
	
	</style>
</head>
<body>
	<div class="box" id="box"></div>
	<!-- <div class="div2 box"></div>
	<div class="div3 box"></div> -->
	<script type="text/javascript">
		window.onload=function(){
			// let box=document.querySelector('.box');
			// let box=document.getElementsByClassName('box');
			let obox=document.getElementById('box');
			 
				obox.addEventListener('touchstart',ev=>{
					ev.preventDefault();
					//手指的个数大于2的时候，才有机会进行缩放放大的造作
						var dis=Math.sqrt(Math.pow(ev.targetTouches[0].clientX-ev.targetTouches[1].clientX,2)+Math.pow(ev.targetTouches[0].clientY-ev.targetTouches[1].clientY,2));
						var w=obox.offsetWidth,h=obox.offsetHeight;
						// let awid=obox.innerWidth,ahei=obox.innerHerght;
					if(ev.targetTouches.length>=2){	
					function fnmove(ev){
						ev.preventDefault();//放在move里面用
						if(ev.targetTouches.length>=2){
							let dis2=Math.sqrt(Math.pow(ev.targetTouches[0].clientX-ev.targetTouches[1].clientX,2)+Math.pow(ev.targetTouches[0].clientY-ev.targetTouches[1].clientY,2));

							obox.style.width=dis2*w/dis+'px';
							obox.style.height=dis2*h/dis+'px';
						}
					}
					function fnend(){
							obox.removeEventListener('touchmove',fnmove,false)
							obox.removeEventListener('touchend',fnend,false)
					}
					
						obox.addEventListener('touchmove',fnmove,false)
						obox.addEventListener('touchend',fnend,false)
					}
				},false);
		};	


	</script>
</body>
</html>